<template>
  <div
    class="me-skills-chart"
    ref="me-skills-chart"/>
</template>

<script>
  import EChares from 'echarts'

  /**
   * 个人简介界面绘制图表
   */
  export default {
    name: "MeSkillsChart",
    data() {
      return {
        /**
         * 图表对象
         */
        chart: null
      }
    },
    mounted() {
      this.chart = EChares.init (this.$refs['me-skills-chart']);
    },
    methods: {
      /**
       * 设置数据
       * @param {MeModel} data 个人数据
       */
      setData(data) {
        this.chart.setOption ({
          color: ['#3398DB'],
          grid: {
            top: 10,
            left: 10,
            right: 10,
            bottom: 30,
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: [
              {
                value: '小程序',
                textStyle: {
                  fontSize: 16
                }
              }, {
                value: 'WEB前端',
                textStyle: {
                  fontSize: 16
                }
              }, {
                value: 'iOS',
                textStyle: {
                  fontSize: 16
                }
              }, {
                value: 'Node.js',
                textStyle: {
                  fontSize: 16
                }
              }, {
                value: 'Java',
                textStyle: {
                  fontSize: 14
                }
              }],
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            type: 'bar',
            barWidth: '60%',
            data: [data.xcxNum, data.webNum, data.iosNum, data.nodeNum, data.javaNum],
            label: {
              normal: {
                show: true,
                position: 'insideTop',
                color: '#555'
              }
            },
            itemStyle: {
              normal: {
                color: new EChares.graphic.LinearGradient (
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#83bff6'},
                    {offset: 0.5, color: '#188df0'},
                    {offset: 1, color: '#188df0'}
                  ]
                )
              },
              emphasis: {
                color: new EChares.graphic.LinearGradient (
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#2378f7'},
                    {offset: 0.7, color: '#2378f7'},
                    {offset: 1, color: '#83bff6'}
                  ]
                )
              }
            },
          }]
        });
        this.chart.on ('click', (params) => {
          switch (params.dataIndex) {
            case 0:
              this.$emit ('barClick', 'xcx')
              break
            case 1:
              this.$emit ('barClick', 'web')
              break
            case 2:
              this.$emit ('barClick', 'ios')
              break
            case 3:
              this.$emit ('barClick', 'node')
              break
            case 4:
              this.$emit ('barClick', 'java')
              break
          }
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .me-skills-chart {
    height: 300px;
  }
</style>

<style lang="scss">
  .me-skills-chart-pop {
    .el-dialog__body {
      padding-top: 0px !important;
    }
  }
</style>
